<template>
	<view class="member-balance">
		<view class="account-box ns-border-color">
			<view class="balance">{{ memberAccount.balance }}</view>
			<view class="style ns-padding-bottom">余额</view>
			<!-- <text @click="invest()" class="account-title ns-border-color" v-if="rechargeEnable">充值</text> -->
			<view class="account-option" v-if="draw">
				<view class="ns-border-color"><navigator url="/pages/member/withdrawal/withdrawal">提现记录</navigator></view>
				<view class="ns-border-color"><navigator url="/pages/member/apply_withdrawal/apply_withdrawal">余额提现</navigator></view>
			</view>
		</view>
		<view class="balances">
			<view v-for="(item, index) in balances" :key="index" class="ns-border-color-gray balances-item">
				<view class="ns-margin-bottom balance-head">
					<text class="ns-font-size-base balance-head-title">{{ item.type_name }}</text>
					<text class="ns-text-color ns-font-size-sm num">{{ item.number }}</text>
				</view>
				<text class="balance-text ns-text-color-gray ns-font-size-sm balance-desc">{{ item.text }}</text>
				<text class="ns-text-color-gray balance-time ns-font-size-sm">{{ $util.timeStampTurnTime(item.create_time) }}</text>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
		<uni-load-more :status="status" :content-text="contentText" v-if="balances.length > 0 && pageCount > 1" />
		<view class="empty" v-if="isEmpty && balances.length == 0">
			<view class="iconfont iconyue"></view>
			<view class="ns-text-color-gray">您暂时还没有余额记录哦！</view>
		</view>
		<ns-login ref="login" href = 'balance'></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import loadingCover from '@/components/loading/loading.vue';
import nsLogin from 'components/ns-login/ns-login.vue';
export default {
	components: {
		uniLoadMore,
		loadingCover,
		nsLogin
	},
	data() {
		return {
			pageIndex: 1,
			pageCount: 0,
			memberAccount: [],
			draw: false,
			balances: [],
			status: 'loading',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多了'
			},
			isEmpty: false,
			ident: false, //防止初始化时，触发上拉加载
			rechargeEnable: true
		};
	},
	mixins: [http],
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;

		this.getMemberAccount();
		this.getWithdrawConfig();
		this.getRechargeConfig();
		this.getBalances();
	},
	onReachBottom() {
		if (!this.ident) return;
		this.getBalances();
	},
	methods: {
		getMemberAccount() {
			this.sendRequest({
				url: 'System.Member.memberAccount',
				success: res => {
					if (res.code == 0) {
						this.memberAccount = res.data;
					}
				}
			});
		},
		getWithdrawConfig() {
			this.sendRequest({
				url: 'System.Config.balanceWithdraw',
				success: res => {
					if (res.code == 0) {
						if (res.data.is_use == 1) {
							this.draw = true;
						} else {
							this.draw = false;
						}
					}
				}
			});
		},
		getRechargeConfig() {
			this.sendRequest({
				url: 'System.Config.recharge',
				success: res => {
					if (res.code == 0) {
						if (res.data.value.is_open == 1) {
							this.rechargeEnable = true;
						} else {
							this.rechargeEnable = false;
						}
					}
				}
			});
		},
		getBalances() {
			if (this.status == 'nomore') return;
			this.sendRequest({
				url: 'System.Member.accountRecordsList',
				data: {
					page_index: this.pageIndex,
					account_type: 2
				},
				success: res => {
					this.ident = true;
					if (res.code == 0) {
						let data = res.data;
						this.pageCount = res.data.page_count;
						if (this.pageCount == 0) {
							this.status = 'nomore';
							this.isEmpty = true;
							this.contentText.contentnomore = '';
						} else {
							if (this.pageIndex < this.pageCount) {
								this.status = 'more';
							} else {
								this.status = 'nomore';
								this.contentText.contentnomore = '没有更多了';
							}

							this.isEmpty = false;

							if (data.data.length > 0) {
								this.balances = this.balances.concat(data.data);
								this.pageIndex++;
							}
						}
					}
					if(this.$refs.loadingCover == undefined) return
					this.$refs.loadingCover.hide();
				}
			});
		},
		invest() {
			this.$util.redirectTo('/pages/member/recharge/recharge');
		}
	}
};
</script>

<style lang="scss">
.account-option {
	width: 100%;
	height: 96rpx;
}

.balance {
	text-align: center;
}
.balances{
	background: #fff;
}

.account-box .balance {
	font-size: 84rpx;
	color: #fff;
}

.style {
	margin-top: 34rpx;
	color: #fff;
	text-align: center;
}

.account-box .account-title {
	font-size: 32rpx;
	line-height: 90rpx;
	border: 2rpx solid;
	padding: 14rpx 36rpx;
	color: #333;
	background-color: #fff;
	border-radius: 6%;
}

.account-option {
	display: flex;
	width: 100%;
	height: 96rpx;
	margin-top: 42rpx;
}

.account-box {
	padding-top: 90rpx;
	border-top: 2rpx solid;
	text-align: center;
}

.account-option view {
	text-align: center;
	line-height: 96rpx;
	font-size: 32rpx;
	border-top: 2rpx solid;
	border-bottom: 2rpx solid;
	border-right: 2rpx solid;
	color: #fff;
	width: 50%;
}

.draw {
	text-align: center;
}
.balances-item {
	display: flex;
	flex-direction: column;
	padding: 30rpx 20rpx;
	border-bottom: 1px solid $ns-border-color-gray;
	font-size: $ns-font-size-lg + 2rpx;
}
.balance-head {
	display: flex;
	justify-content: space-between;
	line-height: 1;
	.balance-head-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 460rpx;
	}
	.num {
		font-size: $ns-font-size-lg;
	}
}
.balance-time {
	align-self: flex-end;
}

.balance-text {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.5;
}
</style>
